<template>
    <!-- 头部组件容器，包含标题和输入框 -->
    <div class="header">
        <!-- 应用标题 -->
        <p class="title">todos</p>

        <!--
            任务输入框：
            - v-model.r.trim 实现双向绑定，.r 表示自动去除首尾空格（trim）
            - placeholder 提示用户输入内容
            - @keyup.enter 监听回车键，触发添加任务的函数
        -->
        <input
            class="new-todo"
            type="text"
            placeholder="请填写任务"
            v-model.r.trim="name"
            @keyup.enter="enterName"
        />
    </div>
</template>

<script setup>
// 导入 ref 创建响应式数据，用于存储输入框的内容
import { ref } from "vue";

// 创建响应式变量 name，绑定到输入框，初始值为空字符串
// 用于实时记录用户输入的任务名称
const name = ref("");

// 定义自定义事件发射器，声明当前组件可以触发 addTodo 事件
// 用于向父组件传递新任务的名称
const emit = defineEmits(['addTodo'])

// 回车键触发的函数：添加新任务并清空输入框
const enterName = () => {
    // 避免添加空任务（v-model.r.trim 已处理空格，这里可进一步判断）
    if (name.value) {
        // 触发 addTodo 事件，将输入的任务名称（name.value）传递给父组件
        emit("addTodo", name.value);

        // 清空输入框，准备接收下一个任务
        name.value = "";
    }
}
</script>

<style scoped>
/* 头部组件容器样式 */
.header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); /* 底部阴影，增强层次感 */
    padding: 20px; /* 内边距，让内容不紧贴边缘 */
}

/* 标题样式 */
.title {
    margin: 0; /* 去除默认外边距 */
    font-size: 36px; /* 大字体突出标题 */
    font-weight: 400; /* 轻量级字体，避免过于厚重 */
    text-align: center; /* 居中显示 */
    color: #b83f45; /* 特定红色，符合 todos 应用的经典风格 */
}

/* 输入框样式 */
.new-todo {
    width: 93%; /* 宽度接近容器，留少量边距 */
    padding: 20px 10px 20px 50px; /* 内边距，左侧留空用于视觉平衡 */
    height: 20px; /* 固定高度，控制输入框大小 */
    border: none; /* 去除默认边框 */
    background: rgba(0, 0, 0, 0.003); /* 极浅灰色背景 */
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.05); /* 内阴影，增强输入框质感 */
    font-size: 18px; /* 输入文字大小适中 */
}

/* 输入框获取焦点时的样式（可选） */
.new-todo:focus {
    outline: none; /* 去除默认焦点边框 */
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); /* 增强焦点状态的内阴影 */
}
</style>